<template>
  <div class="w-375px p-20px">
    <div class="w-full flex justify-center relative">
      <div>{{ Info.shop_name }}</div>
      <div
        class="ml-20px w-80px h-28px rounded-5px bg-[#2E95FF] flex justify-center items-center text-11px text-white absolute right-40px"
      >
        <a :href="Info.url" target="_blank">导出预约接龙</a>
      </div>
    </div>
    <div class="mt-20px text-[#999999] text-14px w-full text-center">
      {{ Info.date_time }} {{ time }} {{ week }}
    </div>
    <div class="flex justify-center items-center mt-5px relative">
      <div class="flex flex-col items-center text-14px">
        <div>接龙人数：{{ Info.num }}</div>

        <div class="mt-3px">预约时间:{{ Info.time }}</div>
      </div>
      <div
        @click="router.push('/index/home/jielong')"
        class="w-60px h-28px rounded-5px bg-[#2E95FF] flex justify-center items-center ml-20px text-11px text-white absolute right-0"
      >
        预约接龙
      </div>
    </div>
    <div class="mt-20px border-b"></div>
    <div
      class="mt-20px pb-15px border-b text-14px"
      v-if="Info.list.length > 0"
      v-for="item in Info.list"
    >
      <div class="w-full flex justify-between">
        <div>{{ item.user_name }} 邀请码：{{ item.user_no }}</div>
        <div class="text-[#2E95FF]" @click="copy(item.user_no)">复制邀请码</div>
      </div>
      <div class="text-[12px] text-[#6D6D6D] mt-10px">{{ item.price }}</div>
      <div class="mt-10px">交易时间：{{ item.create_time }}</div>
      <div class="mt-10px" v-show="item.tj_no">
        邀请人：{{ item.tj_no }} 姓名：{{ item.tj_name }}
      </div>
    </div>
    <div v-else class="mt-200px">
      <nodata></nodata>
    </div>
  </div>
</template>
<script setup>
import { shopInfo } from "@/util/api";
import { useRouter } from "vue-router";
import { showToast } from "vant";
import nodata from "@/components/nodata.vue";
import h5Copy from "@/util/junyi-h5-copy";
const router = useRouter();
const Info = reactive({
  date_time: "",
  list: [],
  num: "",
  shop_name: "",
  time: "",
  url: "",
});
const week = ref("");
const time = ref("");
const getData = async () => {
  const res = await shopInfo();
  for (let i in Info) {
    Info[i] = res.msg[i];
  }
  let date = new Date();
  let w = date.getDay();
  switch (w) {
    case 1:
      week.value = "周一";
      break;

    case 2:
      week.value = "周二";
      break;
    case 3:
      week.value = "周三";
      break;
    case 4:
      week.value = "周四";
      break;
    case 5:
      week.value = "周五";
      break;
    case 6:
      week.value = "周六";
      break;
    case 7:
      week.value = "周日";
      break;
  }
  setInterval(() => {
    let d = new Date();
    time.value = d.toLocaleTimeString();
  }, 1000);
};
getData();
const copy = (val) => {
  const res = h5Copy(val);
  if (res) {
    showToast("复制成功");
  } else {
    showToast("复制失败");
  }
};
</script>
<style scoped lang="scss"></style>
